<!-- 绑定银行卡提示框 -->
<template>
	<view class="tip-child x-c" v-if="show" @touch.stop.prevent="">
		<template>
			<view class="mask" ></view>
			
			<view class="content pr">
				<!-- 关闭按钮 -->
				<view class="close_img" @tap="show = false">
					<image :src="close_img" mode=""></image>
				</view>
				
				<view class="tip_content">
					<view class="tip_text">
						您的手机号在我行无银行卡，若您的农商银行卡绑定的手机号不是当前手机，可更 换账号或用银行卡绑定此手机号
					</view>
					
					<view class="btns x-bc">
						<view class="exchange">
							切换账号
						</view>
						<view class="binding" @tap="jump(bindUrl)">
							立即绑定
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				close_img: this.imgUrl + 'close.png',
				bindUrl: '/pages/user/binding/binding'
			}
		},
		methods: {
			// 路由
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background-color: rgba($color: #000000, $alpha: 0.7);
	}
	
	.tip-child {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		.content {
			z-index: 1000;
			.close_img {
				text-align: right;
				position: relative;
				padding-bottom: 22rpx;
				left: 0;
				image {
					width: 56rpx;
					height: 56rpx;
				}
			}
			
			.tip_content {
				background: rgba($color: #FFF, $alpha: 1.0);
				padding: 58rpx 36rpx 62rpx;
				text-align: center;
				border-radius: 24rpx;
				.tip_text {
					width: 468rpx;
					font-size: 26rpx;
					color: #333333;
				}
				
				.btns {
					padding-top: 52rpx;
					.binding {
						padding: 20rpx 58rpx;
						border-radius: 8rpx;
						background: linear-gradient(to right, #FF2D1B, #FF977B);
					}
					.exchange {
						color: #FF2D1B;
						border: 2rpx solid #FF2D1B;
						padding: 20rpx 58rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
</style>
